<template>
<li class="current-user-wrap">
  <a>
    <et-icon :name="userIcon" />
    <span class="hide-for-small-only">{{displayName}}</span>
  </a>
  <ul class="menu vertical et-top-right-menu-item">
    <li>
      <a @click="changePwdHandler">
        <et-icon :name="pwdIcon" />
        <span>{{ $t('cmpt.label.changePwd') }}</span>
      </a>
    </li>
    <li>
      <a @click="signOutHandler">
        <et-icon :name="signOutIcon" />
        <span>{{ $t('cmpt.label.signOut') }}</span>
      </a>
    </li>
  </ul>
</li>
</template>

<script>
import { EtIcon } from '../../../widgets';

export default {

  components: {
    EtIcon
  },

  props: {
    userIcon: {
      type: String,
      default: 'user'
    },
    pwdIcon: {
      type: String,
      default: 'password'
    },
    signOutIcon: {
      type: String,
      default: 'logout'
    },
    displayName: {
      type: String
    },
    changePwdHandler: {
      type: Function,
      default: () => {}
    },
    signOutHandler: {
      type: Function,
      default: () => {}
    }
  },

  i18n: {
    messages: {
      en: {
        cmpt: {
          label: {
            changePwd: "Change PWD",
            signOut: "Sign Out"
          }
        }
      },
      cn: {
        cmpt: {
          label: {
            changePwd: "修改密码",
            signOut: "注销"
          }
        }
      }
    }
  }

};
</script>
